
const tanke = document.querySelector('.tanke')
const box = document.querySelector('.box')
const one = document.querySelector('.one')
const fenshu = document.querySelector('.fenshu')
const defen = document.querySelector('.defen')
let x = 280
let y = 480
let widthx = 20
let heightx = 20
let flag = true
let i = 0
let reg = 0
let timer = null
let timer2 = null
//读取分数
let Fenshu = 0
let date = localStorage.getItem('fenshu')
Fenshu = date || 0
fenshu.innerHTML = `最高分${Fenshu}`
let Defen = 0
//获取大盒子和红色小盒子的位置


//给document添加事件，这样可以获取到元素的位置
document.addEventListener('keydown', function (e) {
  // if (e.key === 'Enter') {
  //   tanke.appendChild(tanke.children[i].cloneNode(true))
  //   tanke.children[i].style.top = '-1000px'
  //   i++
  //   console.log(i);
  // }
  //上下左右判断

  if (e.key === 'ArrowDown') {
    down()

    //tanke.style.transform = 'rotate(180deg)'
  }
  if (e.key === 'ArrowRight') {
    right()

  }
  if (e.key === 'ArrowLeft') {
    left()

    //tanke.style.transform = 'rotate(-90deg)'
  }
  if (e.key === 'ArrowUp') {
    up()

  }



  //自动移动

  //console.log(reg);
  if (reg === 1) {
    //给每个分数段设置不同的移动速度
    if (Defen <= 10) {
      timer && clearInterval(timer)
      timer = setInterval(up, 300)
    } else if (Defen > 10 && Defen <= 20) {
      timer && clearInterval(timer)
      timer = setInterval(up, 250)
    } else {
      timer && clearInterval(timer)
      timer = setInterval(up, 200)
    }


  } else if (reg === 2) {

    if (Defen <= 10) {
      timer && clearInterval(timer)
      timer = setInterval(right, 300)
    } else if (Defen > 10 && Defen <= 20) {
      timer && clearInterval(timer)
      timer = setInterval(right, 250)
    } else {
      timer && clearInterval(timer)
      timer = setInterval(right, 200)
    }

  } else if (reg === 3) {

    if (Defen <= 10) {
      timer && clearInterval(timer)
      timer = setInterval(down, 300)
    } else if (Defen > 10 && Defen <= 20) {
      timer && clearInterval(timer)
      timer = setInterval(down, 250)
    } else {
      timer && clearInterval(timer)
      timer = setInterval(down, 200)
    }

  } else if (reg === 4) {

    if (Defen <= 10) {
      timer && clearInterval(timer)
      timer = setInterval(left, 300)
    } else if (Defen > 10 && Defen <= 20) {
      timer && clearInterval(timer)
      timer = setInterval(left, 250)
    } else {
      timer && clearInterval(timer)
      timer = setInterval(left, 200)
    }

  }



})
//吃掉苹果的函数
function eat() {
  const position = box.getBoundingClientRect()
  const position01 = one.getBoundingClientRect()
  //a和b是红色盒子在大盒子内的相对坐标，减去10是因为大盒子有边框
  const a = position01.left - position.left - 10
  const b = position01.top - position.top - 10
  //console.log(a);
  //蓝色盒子和红色盒子的位置判断，重合的话就让红色盒子消失，蓝色盒子变大
  //flag判断是为了让红色盒子消失的同时，出现在另外一个位置
  if (flag) {
    if ((x >= a && x <= a + 20 && y >= b && y <= b + 20) || (x >= a - 20 && x <= a && y >= b - 20 && y <= b) || (x >= a - 20 && x <= a && y >= b && y <= b + 20) || (x >= a && x <= a + 20 && y >= b - 20 && y <= b)) {
      //widthx += 10
      //heightx += 10
      //tanke.style.width = `${widthx}px`
      //tanke.style.height = `${heightx}px`
      one.style.display = 'none'
      //每次吃到一个元素，也会创建一个li加入到box中
      const li = document.createElement('li')
      li.style.display = 'none'
      // li.style.position = 'absolute'
      box.appendChild(li)
      //加分数
      Defen++
      defen.innerHTML = `得分${Defen}`
      //console.log(list);
      flag = !flag
    }
    show()
    // console.log(a);
    // console.log(x);
  }

  //console.log(flag);
}
//苹果出现函数
function show() {
  if (!flag) {
    one.style.display = 'block'
    let a = []
    let b = []
    const list = document.querySelectorAll('li')
    const position = box.getBoundingClientRect()
    for (let i = 1; i < list.length; i++) {
      let position02 = list[i].getBoundingClientRect()
      let aa = position02.left - position.left - 10
      let bb = position02.top - position.top - 10
      a.push(aa)
      b.push(bb)
    }
    let m = 0
    let n = 0
    let mn = []
    //这个函数目的是让苹果出现在盒子空白处，但是好像没什么用
    function rom() {
      //给苹果的坐标进行判断
      m = Math.floor((Math.random() * 560) / 40) * 40
      n = Math.floor((Math.random() * 560) / 40) * 40
      for (let i = 0; i < a.length; i++) {
        //console.log(a[i]);
        //如果坐标重合，就重新获取坐标
        if ((m <= a[i] + 20 && m >= a[i] - 20) || (n <= b[i] + 20 && n >= b[i] - 20)) {
          // if ((m = a[i]) || (n = b[i])) {
          return rom()
        } else {
          mn = [m, n]
          return mn
        }
      }
    }
    rom()
    //console.log(mn);
    one.style.left = mn[0] + 'px'
    one.style.top = mn[1] + 'px'
    flag = true
  }
}
function down() {
  if (reg != 1) {
    reg = 3
    y += 40
    if (y >= 580) {
      y = 580
    }
    //console.log(y)
    tanke.style.top = `${y}px`
    //tanke.style.transform = 'rotate(180deg)'
    //贪吃蛇移动的逻辑就是每次移动都将最后一个元素的位置挪到头部的位置
    //判断页面上有没有li标签
    if (document.querySelector('li')) {
      const list = document.querySelectorAll('li')
      for (let i = 0; i < list.length; i++) {
        // console.log(list[list.length - 1]);
        //给第一个li定位，第一个li就是后面生成的新标签，并插入到了所有li的最前面
        list[0].style.display = 'block'
        list[0].style.position = 'absolute'
        list[0].style.top = `${y - 40}px`
        list[0].style.left = `${x}px`
      }
      if (list.length > 1) {
        //每次移动，都会把最后一个li删除，并生成一个新li，放入最前面
        box.removeChild(list[list.length - 1])
        const li = document.createElement('li')
        li.style.display = 'none'
        box.insertBefore(li, list[0])
      }
    }
  }
  eat()
  end()

}
function right() {
  if (reg != 4) {
    reg = 2
    x += 40
    if (x >= 580) {
      x = 580
    }
    tanke.style.left = `${x}px`
    //tanke.style.transform = 'rotate(90deg)'
    if (document.querySelector('li')) {
      const list = document.querySelectorAll('li')

      for (let i = 0; i < list.length; i++) {
        // console.log(list[0]);
        list[0].style.display = 'block'
        list[0].style.position = 'absolute'
        list[0].style.top = `${y}px`
        list[0].style.left = `${x - 40}px`
      }
      if (list.length > 1) {

        box.removeChild(list[list.length - 1])
        const li = document.createElement('li')
        li.style.display = 'none'
        box.insertBefore(li, list[0])
      }

    }
  }
  eat()
  end()
}
function left() {
  if (reg != 2) {
    reg = 4
    x -= 40
    if (x <= -20) {
      x = -20
    }
    tanke.style.left = `${x}px`
    //tanke.style.transform = 'rotate(-90deg)'
    if (document.querySelector('li')) {
      const list = document.querySelectorAll('li')

      for (let i = 0; i < list.length; i++) {
        // console.log(list[0]);
        list[0].style.display = 'block'
        list[0].style.position = 'absolute'
        list[0].style.top = `${y}px`
        list[0].style.left = `${x + 40}px`
      }
      if (list.length > 1) {

        box.removeChild(list[list.length - 1])
        const li = document.createElement('li')
        li.style.display = 'none'
        box.insertBefore(li, list[0])
      }

    }
  }
  eat()
  end()
}
function up() {
  if (reg != 3) {
    reg = 1
    y -= 40
    if (y <= -20) {
      y = -20
    }
    tanke.style.top = `${y}px`
    //tanke.style.transform = 'rotate(0deg)'
    if (document.querySelector('li')) {
      const list = document.querySelectorAll('li')

      for (let i = 0; i < list.length; i++) {
        // console.log(list[0]);
        list[0].style.display = 'block'
        list[0].style.position = 'absolute'
        list[0].style.top = `${y + 40}px`
        list[0].style.left = `${x}px`
      }
      if (list.length > 1) {

        box.removeChild(list[list.length - 1])
        const li = document.createElement('li')
        li.style.display = 'none'
        box.insertBefore(li, list[0])
      }
    }
  }
  eat()
  end()
}

//游戏结束判断
function end() {
  let a = []
  let b = []
  const list = document.querySelectorAll('li')
  const position = box.getBoundingClientRect()
  const position03 = tanke.getBoundingClientRect()
  let x = position03.left - position.left - 10
  let y = position03.top - position.top - 10
  //将每一个身体元素的坐标放入数组
  for (let i = 1; i < list.length; i++) {
    let position02 = list[i].getBoundingClientRect()
    let aa = position02.left - position.left - 10
    let bb = position02.top - position.top - 10
    a.push(aa)
    b.push(bb)
  }
  //console.log(x);
  // console.log(x);
  //console.log(x);
  //判断蛇头与身体的坐标是否重合
  if (a.length > 3) {
    for (let i = 3; i < a.length; i++) {
      //console.log(a[i]);
      //坐标重合，就结束游戏
      if (x === a[i] && y === b[i]) {
        if (Defen > Fenshu) {
          //存分数
          localStorage.setItem('fenshu', Defen)
        }
        alert('游戏结束')
        location.href = "./贪吃蛇草稿.html"
        // location.reload(true)
        break
        // console.log(11);
      }
    }
  }
  //超过边界判断，超过了就结束游戏
  if (x < 0 || x > 560 || y < 0 || y > 560) {
    if (Defen > Fenshu) {
      //存分数
      localStorage.setItem('fenshu', Defen)
    }
    alert('游戏结束')
    location.href = "./贪吃蛇草稿.html"
    // location.reload(true)
  }
  //console.log(a);
}